<template>
    <div class="contact">
        <section class="inner_banner">
            <div class="picture_container">
                <img src="../../images/commoncard/swiperCard/contactus.png" title="联系我们inbanner" alt="联系我们inbanner"
                    class="inner_banner_pc">
                <!-- <img src="/uploads/image/20200509/1589053199.png" title="关于我们inbanner" alt="关于我们inbanner"
                    class="inner_banner_m"> -->
            </div>
        </section>
        <div class="nav">
            <div class="center flex flex_column_center   flex_row_strat">
                <div class="flex item">
                    <i class="iconfont icon-zhuye-copy"></i>当前位置：<a href="/" title="">首页</a><span
                        class="iconfont icon-jiantou_liebiaoxiangyou_o"></span><a @click="currentLoactiongo()"
                        title="联系我们">联系我们</a><span class="iconfont icon-jiantou_liebiaoxiangyou_o"></span><a
                        title="联系我们">联系方式</a><span class="iconfont icon-jiantou_liebiaoxiangyou_o"
                        v-if="currentLoaction"></span><a href="javascript:;" :title="currentLoaction" class="active"
                        onclick="return false">{{ currentLoaction }}</a>
                </div>
            </div>
        </div>
        <section class="center main1 clear_float">
            <div class="inner_left">
                <div class="center">
                    <div class="left ">
                        <div class="left_monu">
                            <div class="title">
                                <p class="cn">采购咨询</p>
                                <p class="en">Contact Us</p>
                            </div>
                            <div class="content">
                                <ul>
                                    <li :class="[currenttreeLevel1 ? 'active' : '']"
                                        v-for="(item, index) in contactTree" :key="index"
                                        @click="clickServiceItem(item, index)">
                                        <a class="flex flex_column_center flex_row_justify stair "
                                            :class="[contactbool? 'active_trans' : '']" href="javascript:;"><span
                                                class="flex1">{{ item.title }}</span><i
                                                class="iconfont icon-jiantou_liebiaoxiangyou_o"></i></a>
                                        <!-- <div class="down" :style="[{ display: contactbool ? 'block' : 'none' }]"> -->
                                        <div class="down" :style="[{ display: contactbool ? 'block' : 'none' }]">
                                            <ul>
                                                <a title="本部地址" ref="letfNews" class="flex flex_column_center "
                                                    @click.stop="clickchilds(li, index)"
                                                    v-for="(li, index) in  item.chiildrens " :key="index">
                                                    <i class="icon"></i>
                                                    <li>{{ li.title }}</li>
                                                </a>
                                            </ul>
                                        </div>
                                    </li>

                                </ul>
                            </div>
                        </div>


                        <div class="left_tel">
                            <img src="@/images/commoncard/qualityTel.png" alt="/服务质量监督ad2" title="/服务质量监督ad2">
                        </div>
                    </div>
                </div>
            </div>
            <div class="right" id="rightContent"  v-if="rightshow">
                <div class="right_title clear_float">
                    <h3>{{ rightTitle }}</h3>
                </div>
                <div class="content">
                    <div class="explain_container">
                        <div class="explain">
                            <div class="explain_title">
                                <div class="explain_icon">
                                    <i class="el-icon-phone"></i>
                                </div>
                                <div class="explain_text">联系地址：</div>
                            </div>
                            <div class="explain_content">
                                <p>{{ rightobj.addr }}</p>
                            </div>
                        </div>
                        <div class="explain">
                            <div class="explain_title">
                                <div class="explain_icon">
                                    <i class="el-icon-s-order"></i>
                                </div>
                                <div class="explain_text">业务联系：</div>
                            </div>
                            <div class="explain_content">
                                <div v-html="rightobj.connection"></div>

                            </div>
                        </div>
                        <div class="explain">
                            <div class="explain_title">
                                <div class="explain_icon">
                                    <i class="iconfont  icon-youxiang1"></i>
                                </div>
                                <div class="explain_text">电子信箱：</div>
                            </div>
                            <div class="explain_content">
                                <a href="mailto:zszjs@163.net" rel="nofollow">{{ rightobj.email }}</a>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- <div class="right_function clear_float">
                    <div class="fr flex">
                        <a href="javascript:;" id="addcollect">
                            <i class=" iconfont icon-shoucang"></i>
                            <p>收藏</p>
                        </a>
                        <a href="javascript:self.print();">
                            <i class="iconfont icon-24gl-printer"></i>
                            <p>打印</p>
                        </a>
                        <a href="javascript:window.close();">
                            <i class=" iconfont icon-guanbi"></i>
                            <p>关闭</p>
                        </a>
                    </div>
                </div> -->
            </div>
        </section>
    </div>
</template>
<script>
import { config } from "@/common/config.js"
export default {
    data() {
        return {
            contactTree: [
                {
                    title: '咨询',
                    industryCat: 'ZJ_RYZZ',
                    translate:'true',
                    active: true,
                    chiildrens: [{
                        title: '本部地址',
                        industryCat: 'ZJ_QYZZ',
                        type: "imageDispaly"
                    }, {
                        title: '古镇站地址',
                        industryCat: 'ZJ_QYRY',
                        type: "imageDispaly"
                    }, {
                        title: '小榄站地址',
                        industryCat: 'ZJ_QYRY',
                        type: "imageDispaly"
                    }, {
                        title: '阜沙站地址',
                        industryCat: 'ZJ_QYRY',
                        type: "imageDispaly"
                    }, {
                        title: '南头站地址',
                        industryCat: 'ZJ_QYRY',
                        type: "imageDispaly"
                    }, {
                        title: '火炬站地址',
                        industryCat: 'ZJ_QYRY',
                        type: "imageDispaly"
                    },]
                },
            ],
            rightTitle: '',
            rightobj: {},
            rightshow: false,
            // 显示子li
            contactbool: false,
            currentLoaction:''
        }
    },
    computed: {
        // 获取子li
        currenttreeLevel1() {
            return this.contactTree[0].active
        }
    },
    watch: {

    },
    created() {
        this.init()
    },
    methods: {
        async init() {
            this.currentLoaction=this.contactTree[0].chiildrens[0].title
            this.contactbool = true
            try{
             await this.getproTree()
             this.clickchilds(this.contactTree[0].chiildrens[0],0)
            } catch (error) {
                console.error('发生异常:', error);
                 // 重新抛出异常
              throw error;
            }

           
        },
        previewPic(code) {
            return config.url +config.prefix+ '/file/previewFile?code=' + code
        },

        async getproTree() {
            let params = {
                tenantId: 1,
                id: 3
            }
            try {
                const res = await this.$http.get(this.$api.contactUsApi.listPlateCatAndChildren, params);
                if (res.code == 200) {
                    let result = [];
                    const objArray = res.data;
                    if (objArray.length > 0) {
                        for (let [index, item] of objArray.entries()) {
                            let detail = {
                                id: item.id,
                                title: item.title,
                                bgPic: this.previewPic(item.bgPic)
                            };
                            result.push(detail);
                        }
                    }
                    this.contactTree[0].chiildrens = result;
                    return result; // 返回结果，使函数成为一个返回 Promise 的异步函数
                }
            } catch (error) {
            
                console.error('发生异常:', error);
            // 重新抛出异常
            throw error;
            }
        },
        //获取右边详情
        getdetail(data) {
            let params = {
                itemId: data
            }
            let _that = this
            this.$http.get(this.$api.contactUsApi.getContactUs, params).then(res => {
                if (res.code == 200) {
                    _that.rightobj = res.data
                    _that.rightshow = true

                }
            })
        },
        clickServiceItem(data) {
            this.currentLoaction=''
            if (data.chiildrens?.length > 0) {
                this.contactbool = !this.contactbool
            }

            return
            this.rightTitle = data.title
            this.getdetail(data.id)
        },
        contacttype(data) {
            switch (data) {
                case '本部地址':
                    return 'ZJ_RYZZ'
                case '古镇站地址':
                    return 'ZJ_QYZZ'
                case '小榄站地址':
                    return 'ZJ_QYRY'
                case '阜沙站地址':
                    return 'ZJ_QYRY'
                case '南头站地址':
                    return 'ZJ_QYRY'
            }
        },
        // 子列表
        clickchilds(data, index) {
            this.currentLoaction=data.title
            this.$nextTick(() => {
                this.$refs.letfNews[index].classList.add('active');
                for (let i = 0; i < this.$refs.letfNews.length; i++) {
                    if (i != index) {
                        this.$refs.letfNews[i].classList.remove('active');
                    }
                }
            });
            this.rightTitle = data.title
            this.getdetail(data.id)
        },
        currentLoactiongo(){
            window.location.reload()
        }

    }
}
</script>
<style scoped>
@import '@/styles/index.scss';
/* contact START */
.contact .nav {
    background: #fff;
}

.contact .main1 {
    padding: 20px 0 40px;
}

.contact .main1 .right .explain {
    position: relative;
    padding-left: 40px;
}

.contact .main1 .right .explain:not(:last-child) {
    padding-bottom: 15px;
    border-bottom: 1px solid #eee;
}

.contact .main1 .right .explain:not(:first-child) {
    padding-top: 18px;
}

.contact .main1 .right .explain:not(:first-child) .explain_title .explain_icon {
    top: 18px;
}

.contact .main1 .right .explain .explain_title .explain_icon {
    position: absolute;
    top: 0;
    left: 0;
    width: 28px;
    height: 28px;
    color: #1f6cc1;
    font-size: 14px;
    line-height: 26px;
    text-align: center;
    border-radius: 50%;
    border: solid 1px #1f6cc1;
    background: #e7eff7;
}

.contact .main1 .right .explain .explain_title .explain_text {
    color: #555;
    font-size: 16px;
    line-height: 28px;
    font-weight: bold;
}

.contact .main1 .right .explain .explain_content {
    line-height: 32px;
    font-size: 16px;
    margin-top: 2px;
    color: #666;
}

/* contact END */
/* download START */
.download .nav {
    background: #fff;
}

.download .main1 {
    padding: 20px 0 40px;
}

.download .main1 .right .right_title {
    margin-bottom: 5px;
}

.download .main1 .right .download_list .item:not(:last-child) {
    border-bottom: 1px solid #eee;
}

.download .main1 .right .download_list .item:hover .item_title {
    color: #1f6cc1;
}

.download .main1 .right .download_list .item:hover .item_icon {
    color: #1f6cc1;
}

.download .main1 .right .download_list .item_container {
    height: 60px;
}

.download .main1 .right .download_list .item_title {
    width: 470px;
    font-size: 16px;
    color: #333333;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    -o-transition: color 0.3s;
    -moz-transition: color 0.3s;
    -webkit-transition: color 0.3s;
    transition: color 0.3s;
}

.download .main1 .right .download_list .item_title .iconfont {
    font-size: 20px;
    color: #516374;
    margin-right: 12px;
    position: relative;
    top: 1px;
}

.download .main1 .right .download_list .item_time {
    font-size: 14px;
    color: #b2b2b2;
}

.download .main1 .right .download_list .item_icon {
    font-size: 20px;
    color: #516374;
    -o-transition: color 0.3s;
    -moz-transition: color 0.3s;
    -webkit-transition: color 0.3s;
    transition: color 0.3s;
}

.download .main1 .right .paging {
    margin-top: 30px;
}

/* download END */
/* centre START */
.centre .nav {
    background: #fff;
}

.centre .main1 {
    padding: 20px 0 40px;
}

.centre .main1 .left .left_monu .title .en {
    letter-spacing: 0;
    font-size: 12px;
}

.centre .main1 .right .right_title {
    margin-bottom: 20px;
}

.centre .main1 .right .content_container {
    line-height: 32px;
    font-size: 16px;
    color: #666;
}

.centre .main1 .right .contact_container {
    margin-top: 40px;
    border-radius: 5px;
    background: #f9f9f9;
    padding: 22px 30px 30px;
}

.centre .main1 .right .contact_container .explain_title {
    text-align: center;
    letter-spacing: 1px;
    font-weight: bold;
    color: #444444;
    font-size: 26px;
}

.centre .main1 .right .contact_container .contact_list {
    margin-top: 26px;
}

.centre .main1 .right .contact_container .item {
    width: 400px;
    border-radius: 5px;
    background: #ffffff;
    border: solid 1px #eeeeee;
    text-align: center;
    line-height: 28px;
    color: #444444;
    margin-top: 20px;
    font-size: 16px;
    padding: 20px 10px;
}

.centre .main1 .right .contact_container .item:nth-child(1),
.centre .main1 .right .contact_container .item:nth-child(2) {
    margin-top: 0;
}

/* centre END */
/* about_video START */
.about_video .nav {
    background: #fff;
}

.about_video .main1 {
    padding: 20px 0 40px;
}

.about_video .main1 .right .right_title {
    margin-bottom: 30px;
}

.about_video .main1 .right .video_list .item {
    width: 31.2%;
    margin-top: 28px;
}

.about_video .main1 .right .video_list .item:not(:nth-child(3n-2)) {
    margin-left: 3.2%;
}

.about_video .main1 .right .video_list .item:nth-child(1),
.about_video .main1 .right .video_list .item:nth-child(2),
.about_video .main1 .right .video_list .item:nth-child(3) {
    margin-top: 0;
}

.about_video .main1 .right .video_list .item:hover .item_picture .item_icon {
    background: rgba(24, 102, 176, 0.5);
}

.about_video .main1 .right .video_list .item:hover .item_explain {
    color: #1f6cc1;
}

.about_video .main1 .right .video_list .item .item_picture {
    position: relative;
    border-radius: 6px;
    overflow: hidden;
}

.about_video .main1 .right .video_list .item .item_picture .picture_container {
    padding-top: 63.76%;
}

.about_video .main1 .right .video_list .item .item_picture .item_icon {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    font-size: 40px;
    color: #fff;
    background: rgba(24, 102, 176, 0.2);
    -o-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -webkit-transition: all 0.5s;
    transition: all 0.5s;
}

.about_video .main1 .right .video_list .item .item_explain {
    font-size: 16px;
    color: #444444;
    text-align: center;
    margin-top: 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    -o-transition: color 0.3s;
    -moz-transition: color 0.3s;
    -webkit-transition: color 0.3s;
    transition: color 0.3s;
}

.about_video .main1 .right .paging {
    margin-top: 35px;
}

.about_video .video_popup {
    position: fixed;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    z-index: 10000;
    max-width: 1920px;
    background: rgba(0, 0, 0, 0.5);
    display: none;
}

.about_video .video_popup .video_popup_container {
    overflow-y: auto;
    padding: 5% 0;
    height: 100%;
}

.about_video .video_popup.active .center {
    -o-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
}

.about_video .video_popup .center {
    margin: auto;
    width: 1000px;
    position: relative;
    background: #fff;
    border-radius: 10px;
    padding: 25px 25px 0;
    opacity: 0;
    -o-transform: translate3d(0, -100px, 0);
    -moz-transform: translate3d(0, -100px, 0);
    -webkit-transform: translate3d(0, -100px, 0);
    transform: translate3d(0, -100px, 0);
    -o-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -webkit-transition: all 0.5s;
    transition: all 0.5s;
}

.about_video .video_popup .center .close {
    position: absolute;
    right: -10px;
    top: -10px;
    width: 32px;
    height: 32px;
    line-height: 32px;
    border-radius: 50%;
    text-align: center;
    background: #1f6cc1;
    font-size: 18px;
    cursor: pointer;
    color: #fff;
}

.about_video .video_popup .center .close:hover {
    opacity: 0.95;
}

.about_video .video_popup .center #video {
    overflow: hidden;
    position: relative;
    padding-top: 63.76%;
    border-radius: 10px;
    background: #f4f4f4;
}

.about_video .video_popup .center #video video {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    max-width: 100%;
    max-height: 100%;
}

.about_video .video_popup .center .video_explain {
    padding: 15px 15px 20px;
    text-align: center;
    line-height: 28px;
    font-size: 16px;
    color: #333;
}

/* about_video END */

@import '@/styles/index.scss';

.right .right_function a .iconfont{
    color: #fff;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background-color: #dedede;
    margin-bottom: 5px;
    font-size: 16px;
    text-align: center;
    line-height: 27px;
    -o-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -webkit-transition: all 0.5s;
    transition: all 0.5s;
}
</style>